<template>
    <div class="col-lg-3" id="label" :title="title">
        <div class="ibox" id="">
            <div class="ibox-title ibox-content">                                           
                <h5 class="float-left">{{label_info.label_hname}}</h5>
                <template v-if="(avgStatus == 'bigGoodH' || avgStatus == 'smallGoodH') || !nessary">
                    <span :class="span_class" v-if="label_info.label_header">{{ label_info.label_header }}</span>
                    <span :class="span_class" v-else>Total</span>
                </template>
                <template v-else>
                    <span class="label float-right label-warning" v-if="label_info.label_header">{{ label_info.label_header }}</span>
                    <span class="label float-right label-warning" v-else>Total</span>
                </template>
                <!-- <h5><span class="mr-4">Patch</span><span class="label label-success float-right ml-5">Total</span></h5> -->
            </div>
            <div class="ibox-content">
                <el-tooltip
					class="item"
					effect="light"
					:content="'高于公司平均值('+getNum(label_good)+')'"
					placement="top-end"
					v-if="(solve == 'smallGoodL' && (avgStatus=='bigGoodL'||avgStatus=='smallGoodL')) && nessary"
				>				
                    <h1 class="no-margins text-warning">
                       <a @click="redirect" :style="label_info.url?'text-decoration:underline':''">{{label_data}}</a>
                    </h1>                   
				</el-tooltip>
                <el-tooltip
					class="item"
					effect="light"
					:content="'达到公司平均值('+getNum(label_good)+')'"
					placement="top-end"
					v-else-if="(solve == 'smallGoodH' && (avgStatus=='bigGoodL'||avgStatus=='smallGoodL')) && nessary"
				>				
                    <h1 class="no-margins text-warning">
                       <a @click="redirect" :style="label_info.url?'text-decoration:underline':''">{{label_data}}</a>
                    </h1>                   
				</el-tooltip>
                <el-tooltip
					class="item"
					effect="light"
					:content="'达到公司平均值('+getNum(label_good)+')'"
					placement="top-end"
					v-else-if="(solve == 'bigGoodH' && (avgStatus=='bigGoodL'||avgStatus=='smallGoodL')) && nessary"
				>				
                    <h1 class="no-margins text-warning">
                       <a @click="redirect" :style="label_info.url?'text-decoration:underline':''">{{label_data}}</a>
                    </h1>                   
				</el-tooltip>
                <el-tooltip
					class="item"
					effect="light"
					:content="'低于公司平均值('+getNum(label_good)+')'"
					placement="top-end"
					v-else-if="(solve == 'bigGoodL' && (avgStatus=='bigGoodL'||avgStatus=='smallGoodL'||avgStatus==undefined)) && nessary"
				>					
                    <h1 class="no-margins text-warning">
                        <a @click="redirect" :style="label_info.url?'text-decoration:underline':''">{{label_data}}</a>
                    </h1>                    
				</el-tooltip>
                <h1 class="no-margins text-warning" v-else-if="(solve == undefined || avgStatus == undefined) && nessary">
                    <a @click="redirect" :style="label_info.url?'text-decoration:underline':''">{{label_data}}</a>
                </h1>
                <h1 :class="h1_class" v-else>
                    <a @click="redirect" :style="label_info.url?'text-decoration:underline':''">{{label_data}}</a>
                </h1>                
                <div v-if="(avgStatus == 'bigGoodH' || avgStatus == 'smallGoodH') || !nessary" :class="div_class">{{label_info.label_unit}}</div>
                <div v-else class="stat-percent font-bold text-warning">{{label_info.label_unit}}</div>
                
                <div v-show="label_now == undefined || !nessary">
                    <small v-if="(avgStatus == 'bigGoodH' || avgStatus == 'smallGoodH') || !nessary" :class="color">{{label_info.label_sname}}</small>
                    <small v-else class="text-warning">{{label_info.label_sname}}</small>
                </div>

                <div v-show="label_avg === undefined && nessary">
                    <small v-if="(avgStatus == 'bigGoodH' || avgStatus == 'smallGoodH') || !nessary" :class="color">{{label_info.label_sname}}</small>
                    <small v-else class="text-warning">{{label_info.label_sname}}</small>
                </div>

                <div v-show="label_now !== undefined && label_avg">
                <template v-if="avgStatus == 'bigGoodH'">
                    <div v-show="nessary" :class="condition">超过目标值({{getNum(label_avg)}})</div>
                </template>
                <template v-else-if="avgStatus == 'bigGoodL'">
                    <div v-show="nessary" class="condition text-warning">低于目标值({{getNum(label_avg)}})</div>
                </template>
                <template v-else-if="avgStatus == 'smallGoodH'">
                    <div v-show="nessary" :class="condition">超过目标值({{getNum(label_avg)}})</div>
                </template>
                <template v-else-if="avgStatus == 'smallGoodL'">
                    <div v-show="nessary" class="condition text-warning">高于目标值({{getNum(label_avg)}})</div>
                </template>
                <template v-else>
                    <div v-show="nessary" class="condition text-warning">达到目标值({{getNum(label_avg)}})</div>
                </template>
                </div>
            </div>
        </div>
    </div>    
</template>
<script>
import { Tooltip } from 'element-ui'
import { mapState } from 'vuex'
export default {
    name: 'LabelGrid',
    props: {        
        label_info: Object,
        label_data: [Number, String],
        label_good: {
            type: Number,
            default: undefined
        },
        label_now: {
            type: Number,
            default: undefined
        },
        label_avg: [Number],
        filters: Object,
        label_import: [String],
        label_precent: {
            type: String,
            default: 'num'
        },
        nessary: {
            type: Boolean,
            default: false
        }
    },
    created() {
        // console.log(this.label_now)
        // console.log(this.label_good)
        // console.log(this.label_avg)
    },
    data() {
        return {           
            span_class: "label float-right label-" + this.label_info.label_class,
            h1_class: "no-margins text-" + this.label_info.label_class,
            div_class: "stat-percent font-bold text-" + this.label_info.label_class,
            color: "text-" + this.label_info.label_class,
            condition: "condition text-" + this.label_info.label_class,
            title: this.label_info.label_title
        }
    },
    computed: {       
        solve() {
            let solveString            
            if(this.label_good) {
                if(this.label_now - this.label_good >= 0 && this.label_import == 'big') {
                    solveString = 'bigGoodH'
                } else if(this.label_now - this.label_good > 0 && this.label_import == 'small') {
                    solveString = 'smallGoodL'
                } else if(this.label_now - this.label_good < 0 && this.label_import == 'big') {
                    solveString = 'bigGoodL'
                } else if(this.label_now - this.label_good <= 0 && this.label_import == 'small') {
                    solveString = 'smallGoodH'
                }
            } else {
                solveString = undefined
            }   

            return solveString
        },
        avgStatus() {
            let statusString   
                   
            if(this.label_avg) {
                if(this.label_now - this.label_avg > 0 && this.label_import == 'big') {
                    statusString = 'bigGoodH'
                } else if(this.label_now - this.label_avg > 0 && this.label_import == 'small') {
                    statusString = 'smallGoodL'
                } else if(this.label_now - this.label_avg < 0 && this.label_import == 'big') {
                    statusString = 'bigGoodL'
                } else if(this.label_now - this.label_avg < 0 && this.label_import == 'small') {
                    statusString = 'smallGoodH'
                } else {
                    statusString = 'goal'
                } 
            } else {
                statusString = undefined
            }      
            return statusString
        }
    },
    mounted: function() {
        
    },
    methods: {
        getNum(value) {
            value = Math.abs(value)
            if(this.label_precent == 'precent') {             
                let str = Number(value * 100).toFixed(2)
                return str + '%'
            } else if(this.label_precent == 'time') {
                if (isNaN(value)) {
				    value = 0;
                }
                var theTime = parseInt(value); // 秒
                var theTime1 = 0; // 分
                var theTime2 = 0; // 小时
                var theTime3 = 0; // 天
                if (theTime > 60) {
                    theTime1 = parseInt(theTime / 60);
                    theTime = parseInt(theTime % 60);
                    if (theTime1 > 60) {
                        theTime2 = parseInt(theTime1 / 60);
                        theTime1 = parseInt(theTime1 % 60);
                        if (theTime2 > 24) {
                            theTime3 = parseInt(theTime2 / 24);
                            theTime2 = parseInt(theTime2 % 24);
                        }
                    }
                }
                var result = '' + parseInt(theTime) + '秒';
                if (theTime1 > 0) {
                    result = '' + parseInt(theTime1) + '分' + result;
                }
                if (theTime2 > 0) {
                    result = '' + parseInt(theTime2) + '时' + result;
                }
                if (theTime3 > 0) {
                    result = '' + parseInt(theTime3) + '天' + result;
                }
                return result;
            } else {
                let str = value + ""
                if(str.indexOf(".") == -1){
                    return value
                }else{
                    return value = value.toFixed(2)
                }
                
            }         
        },
        redirect: function() {
            var url = this.label_info.url;
            if (url) {
                let projectId = ''
                this.filters.projectId ? projectId = this.filters.projectId : projectId = ''
                // let departmentId = this.filters.departmentId
                let time = ''
                this.filters.time ? time=this.filters.time : time=''
                let routeData = this.$router.resolve({
                    path: url,
                    query: {
                        projectId: projectId,
                        time: time
                    }
                });
                window.open(routeData.href, '_blank');
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    @import '../../assets/common/common.scss';

    .text-success {
        color: #409EFF;
    }
    .text-warning{
        color: #f8ac59;
    }
    .no-margins {
        margin: 0 !important;
    }
    h1 {
        font-size: 30px;
    }
    .font-bold {
        font-weight: 600;
    }
    .stat-percent {
        float: right;
    }
    .small, small {
        font-size: 80%;
        font-weight: 400;
    }
    .label-warning, .badge-warning {
        background-color: #f8ac59;
        color: #FFFFFF;
    }
    .condition{
        font-size: 80%;
        font-weight: 400;
        margin-top: 4px;
    }
    .ibox-content{
        position: relative;
    }
    .icon{
        position: absolute;
        right: 20px;
        top: 40%;
    }
</style>
